<!DOCTYPE html>
<!-- saved from url=(0043)http://v.bootstrapmb.com/2021/9/1xa0m11093/ -->
<html lang="UTF-8">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Tailwind样式时间轴状态显示</title>
  <link rel="stylesheet" href="./Tailwind样式时间轴状态显示_files/tailwind.min.css">
  <link rel="stylesheet" href="./Tailwind样式时间轴状态显示_files/all.min.css">
</head>


<body class="bg-gray-50 vsc-initialized" cz-shortcut-listen="true">
  <div class="p-4 mt-4">
    <h3 class="text-2xl text-center font-semibold mb-6">任务名称：XXXXXX</h3>
    <div class="container">
      <div class="flex flex-col md:grid grid-cols-12 text-gray-50">
        <div class="flex md:contents">
          <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
            <div class="h-full w-6 flex items-center justify-center">
              <div class="h-full w-1 bg-green-500 pointer-events-none"></div>
            </div>
            <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-green-500 shadow text-center">
              <!-- <i class="fas fa-check-circle text-white"></i> -->
              <div style="height: 24px; display: flex;align-items: center;justify-content: center;">
                <svg t="1651125439609" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="3141" data-spm-anchor-id="a313x.7781069.0.i0" width="18"
                  height="18">
                  <path
                    d="M432 709.248l-166.624-166.624 45.248-45.248 121.376 121.376 281.376-281.376 45.248 45.248L432 709.248zM512 64C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z"
                    fill="#ffffff" p-id="3142"></path>
                </svg>
              </div>
            </div>
          </div>
          <div class="bg-green-500 col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
            <h3 class="font-semibold text-lg mb-1">实例状态：成功</h3>
            <p class="leading-tight text-justify w-full">
              是否结束：结束
            </p>
            <p class="leading-tight text-justify w-full">
              开始时间：2022-04-23 10:00:01.300
            </p>
            <p class="leading-tight text-justify w-full">
              结束时间：2022-04-23 10:00:11.000
            </p>
          </div>
        </div>
        <div class="flex md:contents">
          <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
            <div class="h-full w-6 flex items-center justify-center">
              <div class="h-full w-1 bg-green-500 pointer-events-none"></div>
            </div>
            <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-green-500 shadow text-center">
              <!-- <i class="fas fa-check-circle text-white"></i> -->
              <div style="height: 24px; display: flex;align-items: center;justify-content: center;">
                <svg t="1651125439609" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="3141" data-spm-anchor-id="a313x.7781069.0.i0" width="18"
                  height="18">
                  <path
                    d="M432 709.248l-166.624-166.624 45.248-45.248 121.376 121.376 281.376-281.376 45.248 45.248L432 709.248zM512 64C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z"
                    fill="#ffffff" p-id="3142"></path>
                </svg>
              </div>
            </div>
          </div>
          <div class="bg-green-500 col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
            <h3 class="font-semibold text-lg mb-1">实例状态：成功</h3>
            <p class="leading-tight text-justify w-full">
              是否结束：结束
            </p>
            <p class="leading-tight text-justify w-full">
              开始时间：2022-04-23 10:00:01.300
            </p>
            <p class="leading-tight text-justify w-full">
              结束时间：2022-04-23 10:00:11.000
            </p>
          </div>
        </div>
        <div class="flex md:contents">
          <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
            <div class="h-full w-6 flex items-center justify-center">
              <div class="h-full w-1 bg-red-500 pointer-events-none"></div>
            </div>
            <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-red-500 shadow text-center">
              <!-- <i class="fas fa-times-circle text-white"></i> -->
              <div style="height: 24px; display: flex;align-items: center;justify-content: center;">
                <svg t="1651127773555" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="3439" width="18" height="18">
                  <path
                    d="M710.624 665.376l-45.248 45.248L512 557.248l-153.376 153.376-45.248-45.248L466.752 512l-153.376-153.376 45.248-45.248L512 466.752l153.376-153.376 45.248 45.248L557.248 512l153.376 153.376zM512 64C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z"
                    fill="#ffffff" p-id="3440"></path>
                </svg>
              </div>
            </div>
          </div>
          <div class="bg-red-500 col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
            <h3 class="font-semibold text-lg mb-1 text-gray-50">实例状态：失败</h3>
            <p class="leading-tight text-justify w-full">
              是否结束：未结束
            </p>
            <p class="leading-tight text-justify w-full">
              开始时间：2022-04-23 10:00:01.300
            </p>
            <p class="leading-tight text-justify w-full">
              结束时间：-
            </p>
          </div>
        </div>
        <div class="flex md:contents">
          <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
            <div class="h-full w-6 flex items-center justify-center">
              <div class="h-full w-1 bg-yellow-300 pointer-events-none"></div>
            </div>
            <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-yellow-300 shadow text-center">
              <!-- <i class="fas fa-exclamation-circle text-gray-50"></i> -->
              <div style="height: 24px; display: flex;align-items: center;justify-content: center;">
                <svg t="1651129030664" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="4332" width="18" height="18">
                  <path
                    d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m191.2 604L488.8 544H480V256h64v246.4l191.2 110.4-32 55.2z"
                    p-id="4333" fill="#ffffff"></path>
                </svg>
              </div>

            </div>
          </div>
          <div class="bg-yellow-300 col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
            <h3 class="font-semibold text-lg mb-1 text-gray-50">实例状态：进行中</h3>
            <p class="leading-tight text-justify w-full">
              是否结束：未结束
            </p>
            <p class="leading-tight text-justify w-full">
              开始时间：2022-04-23 10:00:01.300
            </p>
            <p class="leading-tight text-justify w-full">
              结束时间：-
            </p>
          </div>
        </div>
        <div class="flex md:contents">
          <div class="col-start-2 col-end-4 mr-10 md:mx-auto relative">
            <div class="h-full w-6 flex items-center justify-center">
              <div class="h-full w-1 bg-gray-300 pointer-events-none"></div>
            </div>
            <div class="w-6 h-6 absolute top-1/2 -mt-3 rounded-full bg-gray-300 shadow text-center">
              <!-- <i class="fas fa-exclamation-circle text-gray-400"></i> -->
              <div style="height: 24px; display: flex;align-items: center;justify-content: center;">
                <svg t="1651128828289" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="4082" width="18" height="18">
                  <path
                    d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m-64-128V256h64v384h-64z"
                    p-id="4083" fill="#ffffff"></path>
                </svg>
              </div>
            </div>
          </div>
          <div class="bg-gray-300 col-start-4 col-end-12 p-4 rounded-xl my-4 mr-auto shadow-md w-full">
            <h3 class="font-semibold text-lg mb-1 text-gray-400">实例状态：其它</h3>
            <p class="leading-tight text-justify w-full">
              是否结束：未结束
            </p>
            <p class="leading-tight text-justify w-full">
              开始时间：2022-04-23 10:00:01.300
            </p>
            <p class="leading-tight text-justify w-full">
              结束时间：-
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="imageDownloaderSidebarContainer">
    <div class="image-downloader-ext-container">
      <div tabindex="-1" class="b-sidebar-outer">
        <!---->
        <div id="image-downloader-sidebar" tabindex="-1" role="dialog" aria-modal="false" aria-hidden="true"
          class="b-sidebar shadow b-sidebar-right bg-light text-dark" style="width: 500px; display: none;">
          <!---->
          <div class="b-sidebar-body">
            <div></div>
          </div>
          <!---->
        </div>
        <!---->
        <!---->
      </div>
    </div>
  </div>
  <div class="xl-chrome-ext-bar" id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
    <div class="xl-chrome-ext-bar__logo"></div>

    <a id="xl_chrome_ext_download" href="javascript:;" class="xl-chrome-ext-bar__option">下载视频</a>
    <a id="xl_chrome_ext_close" href="javascript:;" class="xl-chrome-ext-bar__close"></a>
  </div>

  <!-- <iframe src="./Tailwind样式时间轴状态显示_files/sources.html" allow="camera" style="display: none;"></iframe><iframe
    src="./Tailwind样式时间轴状态显示_files/audiosources.html" allow="microphone" style="display: none;"></iframe> -->
  <style>
    .col-start-4:hover {
      cursor: pointer;
      box-shadow: 7px 1px 7px 0 rgba(0, 0, 0, 0.1)
    }

  </style>
</body>

</html>
